<template>
  <!-- 如果存在子路由 -->
  <template v-if="route.children">
    <a-sub-menu class="sub-menu-item" :key="route.path" :title="$t('menu.' + route.z_ch) || route.name" v-if="menuArr.includes(route.path)">
      <template #icon>
        <i v-if="route.icon" class="iconfont menu-icon" :class="routes.fullPath.includes(route.path) ? route.icon2 || route.icon : route.icon" style="font-size: 20px" />
      </template>

      <template v-for="children in route.children">
        <!-- 递归 -->
        <route-menus :route="children" :menuArr="menuArr" />

      </template>
    </a-sub-menu>
  </template>
  <template v-else>
    <a-menu-item class="menu-item" @click="goChildRouter(route)" :key="route.path" v-if="menuArr.includes(route.path)">
      <template #icon>
        <i v-if="route.icon" class="iconfont menu-icon" :class="routes.fullPath == route.path ? route.icon2 || route.icon : route.icon" style="font-size: 20px" />
      </template>
      <span class="nav-text"> {{ route.z_ch ? $t('menu.' + route.z_ch) : route.name }} </span>
    </a-menu-item>
  </template>
</template>
<script lang="ts">
export default {
  name: "routeMenus",
};
</script>
<script setup lang="ts">
import { ref, reactive, toRefs, watch, onMounted } from "vue";
import { RouteRecordRaw, useRouter, useRoute } from "vue-router";
import { systemStore } from "@/store/modules/systemStore";
import getters from "@/store/getters";
// import RouteMenus from "@/components/RouteMenus.vue";
// name

//props
interface RouteMenusProps {
  route: RouteRecordRaw | any;
  menuArr: [],
}
const props = defineProps(['route', 'menuArr']);
//data
const { } = toRefs(props);
const router = useRouter();
const routes = useRoute();
const sysStore = systemStore();
const collapsed = ref<boolean>(false);
//watch
watch(
  () => sysStore.collapseSidebar,
  (_val, oldVal) => {
    collapsed.value = _val;
  }
);
watch(
  () => props.route,
  (val, oldval) => {
  }
);
//methods
const goChildRouter = (route: any) => {
  if (router.currentRoute.value.path != route.path) { // 
    router.push({ path: route.path }).catch(() => { });
  }

}
</script>

<style scope lang="less">
// .ant-menu-vertical .ant-menu-submenu,
// .ant-menu-vertical-left .ant-menu-submenu,
// .ant-menu-vertical-right .ant-menu-submenu,
// .ant-menu-inline .ant-menu-submenu {
//   padding: 0;
//   width: 168px;
//   height: 40px;
//   margin: 8px;
//   box-sizing: content-box;
//   display: flex;
//   flex-direction: row;
//   align-items: center;
//   justify-content: center;
// }

// .ant-menu-inline.ant-menu-root .ant-menu-item>.ant-menu-title-content,
// .ant-menu-inline.ant-menu-root .ant-menu-submenu-title>.ant-menu-title-content {
//   font-size: 14px;
//   font-family: PingFang SC-Regular,
//     PingFang SC;
//   font-weight: 400;
//   // color: #1F6DED;
//   line-height: 14px;
//   -webkit-background-clip: text;
// }

.menu-icon {
  padding-left: 12px;
}

.menu-icon:hover {
  color: var(--theme_button_active_bg_color, #1050c7);
}

.menu-item {
  padding: 0 8px !important;
}

.sub-menu-item {
  padding: 0 8px !important;
}

.menu-item .ant-menu-title-content {}

.sub-menu-item .ant-menu-submenu-title {
  padding-left: 0px !important;
  padding-right: 4px;
}

.ant-menu-item .ant-menu-item-icon,
.ant-menu-submenu-title .ant-menu-item-icon,
.ant-menu-item .anticon,
.ant-menu-submenu-title .anticon {
  min-width: 20px;
  min-height: 20px;
}

.ant-menu-sub.ant-menu-inline>.ant-menu-item,
.ant-menu-sub.ant-menu-inline>.ant-menu-submenu>.ant-menu-submenu-title {
  padding-left: 40px !important;
}

.ant-menu-item .ant-menu-item-icon+span,
.ant-menu-submenu-title .ant-menu-item-icon+span,
.ant-menu-item .anticon+span,
.ant-menu-submenu-title .anticon+span {
  margin-left: 8px;
}

.ant-menu-submenu-expand-icon,
.ant-menu-submenu-arrow {
  right: 0;
  width: 12px;
}
</style>
